<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import { editPasswordService } from '@/api/admin';
import { ElMessage, ElMessageBox } from 'element-plus'
import avatar from '@/assets/default.png'
import { useTokenStore } from '@/stores/token';
import router from '@/router';
import { ref } from 'vue';
const tokenStore = useTokenStore();
const dialog = ref(false)
const handleCommand = (command)=>{
    if(command==='logout'){
        //退出登录
        ElMessageBox.confirm(
    '确认要退出登录?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        tokenStore.removeToken();
        router.push('/login')
      ElMessage({
        type: 'success',
        message: '已退出登录',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消登录',
      })
    })
    }else{
       //修改密码
       dialog.value = true;
    }
}

const passwordModel = ref({
    old_pwd:null,
    new_pwd:null,
    re_pwd:null
})


//修改密码
const editPassword =async()=>{
    console.log("修改密码"+passwordModel.value)
    let result = await editPasswordService(passwordModel.value)
    dialog.value = false
    ElMessage.success('密码修改成功，请重新登录')
    tokenStore.removeToken();
    router.push('/login')

}
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
                router>
                <el-menu-item index="/category">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/order">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>订单管理</span>
                </el-menu-item>
                <el-menu-item index="/user">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
            </el-menu>
            <div class="gotoStore">
              <a href="http://localhost:8081/" class="image-link" target="_blank">
              <img src="@/assets/ST.png" alt="商店溜达溜达">
             </a>
             <span class="door">双击铁哥，商店走起</span>
            </div>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div>当前权限为：<strong>Admin</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <span>设置</span>
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu >
                            <!--<el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>-->
                            <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>广告招租位</el-footer>
        </el-container>
    </el-container>

<!-- 添加修改密码弹窗 -->
<el-dialog v-model="dialog" title="密码修改" width="30%">
      <el-form
        :model="passwordModel"
        :rules="rules"
        label-width="100px"
        style="padding-right: 30px"
      >
        <el-form-item label="旧密码" prop="oldpassword">
          <el-input
            v-model="passwordModel.old_pwd"
            minlength="3"
            maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input
            v-model="passwordModel.new_pwd"
            minlength="3"
            maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="repassword">
          <el-input
            v-model="passwordModel.re_pwd"
            minlength="3"
            maxlength="16"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog = false">取消</el-button>
          <el-button type="primary" @click="editPassword"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #1d1d1d;

        &__logo {
            height: 120px;
            background: url('@/assets/logo2.png') no-repeat center / 120px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}



/* 设置图片链接的样式 */
.image-link {
    display: inline-block; /* 让链接具有块级元素的特性 */
    text-decoration: none; /* 移除链接的下划线样式 */
  }
  
  /* 设置图片的样式 */
  .image-link img {
    width: 150px; /* 设置图片的宽度 */
    height: auto; /* 让高度自适应根据宽度 */
    margin-left: 25px;
    margin-top:80px;
  }

  .door{
    display: block;
    font-size: 12px;
    font-weight: 200;
    color: #fff;
    text-align: center;
  }

</style>